<template>
  <div class="app-container-box">
    <div class="box-tag" />
    <span class="role-manager-title">角色管理</span>
    <div class="warp-line-top" />

    <div class="btn-box">
      <el-button type="primary" @click="handleCreate">创建</el-button>
      <el-button type="danger" :loading="isDeleteLoading" :disabled="deleteRoleDisabled" @click="deleteRoleConfirmVisible = true">删除</el-button>
      <el-button
        type="primary"
        icon="el-icon-refresh"
        :loading="isLoading"
        @click="handleRefreshBtn"
      />

      <el-pagination
        class="page-box"
        background
        layout="total, prev, pager, next, jumper"
        :total="rolesListCount"
        :pager-count="pagerCount"
        :page-size="rolesListQuery.length"
        @current-change="pageChanged"
      />
    </div>

    <div class="table-list-box">
      <el-table
        ref="multipleTable"
        :data="rolesListData"
        style="width: 100%"
        height="654"
        :header-cell-style="elTableHeaderStyle"
        :cell-style="elTableCellStyle"
        tooltip-effect="dark"
        @current-change="clickRowChange"
      >
        <el-table-column label="选择" min-width="20" style="over" align="center">
          <template slot-scope="scope">
            <el-radio v-model="tableRadio" :label="scope.row">
              <i />
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="ID"
          align="center"
          min-width="100"
          show-overflow-tooltip
        />
        <el-table-column
          prop="RoleName"
          label="角色名"
          align="center"
          min-width="90"
          show-overflow-tooltip
        />
        <el-table-column
          prop="remark"
          label="备注"
          align="center"
          min-width="50"
          :formatter="remarkHandler"
          show-overflow-tooltip
        />
        <el-table-column
          prop="created_at"
          label="创建时间"
          align="center"
          min-width="50"
        />
        <el-table-column min-width="50">
          <!-- eslint-disable-next-line vue/no-unused-vars -->
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="fuzzySearchKeyword"
              placeholder="输入关键字搜索"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="create-role-box">
      <el-dialog
        :visible.sync="createRoleVisible"
        width="30%"
        @close="createRoleVisible=false"
      >
        <div slot="title" class="header-title">
          <div style="padding:15px 20px;">创建角色</div>
        </div>

        <!-- 创建角色 -->
        <el-form ref="roleCreateData" :model="roleCreateData" label-width="auto" style="margin-left: 100px" :rules="inputRules">

          <el-form-item label="角色名：" prop="RoleName">
            <el-input
              v-model="roleCreateData.RoleName"
              placeholder="请输入角色名称"
              maxlength="100"
            />
          </el-form-item>

          <el-form-item label="备注：">
            <el-input
              v-model="roleCreateData.remark"
              type="textarea"
              :rows="3"
              placeholder="请输入备注信息"
            />
          </el-form-item>

          <el-form-item label="头像：" prop="HeadSculpture">
            <el-upload
              class="avatar-uploader"
              :action="fileUploadAddr"
              :show-file-list="false"
              :on-success="handleHeadSculptureSuccess"
              :before-upload="beforeAvatarUpload"
              :headers="fileUploadHeaders"
            >
              <img v-if="roleDisplayData.HeadSculpture" :src="roleDisplayData.HeadSculpture" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="createRoleVisible = false">取消</el-button>
          <el-button type="primary" @click="createRoleRequest">提交</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 删除提示框 -->
    <el-dialog
      title="提示"
      :visible.sync="deleteRoleConfirmVisible"
      width="30%"
    >
      <span>确认删除角色？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteRoleConfirmVisible = false">取 消</el-button>
        <el-button type="primary" @click="handelDelete">确 定</el-button>
      </span>
    </el-dialog>

  </div>

</template>

<script>
import {
  getRoles
} from '@/api/lives'
import { deleteRole, createRole } from '@/api/user'
import { mapGetters } from 'vuex'
export default {
  name: 'SubjectSetting',
  data() {
    return {
      inputRules: {
        RoleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ]
      },
      deleteRoleConfirmVisible: false,
      // 角色显示数据
      roleDisplayData: {
        RoleName: '',
        remark: '',
        HeadSculpture: ''
      },
      // 角色创建数据
      roleCreateData: {
        RoleName: '',
        remark: '',
        HeadSculpture: ''
      },
      rolesListQuery: {
        start: 1,
        length: 13,
        keyword: '',
        order: 'desc'
      },
      // 模糊查询关键字
      fuzzySearchKeyword: '',
      // 是否禁用删除
      deleteRoleDisabled: true,
      // 文件上传地址
      fileUploadAddr: '',
      fileUploadHeaders: {
        Authorization: ''
      },
      createRoleVisible: false,
      isLoading: false,
      isDeleteLoading: false,
      rolesListCount: 0,
      rolesListData: [],
      tableRadio: undefined,
      pagerCount: 5
    }
  },
  computed: {
    ...mapGetters([
      'token'
    ])
  },
  watch: {
    'token'(n, o) {
      this.fileUploadHeaders.Authorization = this.token
    },
    'fuzzySearchKeyword'(n, o) {
      this.rolesListQuery.start = 1
      this.rolesListQuery.keyword = n
    },
    rolesListQuery: {
      async handler(n, o) {
        this.refreshRoles()
      },
      deep: true
    }
  },
  mounted() {
    this.refreshRoles()
    // 上传文件的地址
    this.fileUploadAddr = process.env.VUE_APP_BASE_API + '/api/v1/files'
    // 设置访问头
    this.fileUploadHeaders.Authorization = this.token
  },
  methods: {
    // 创建角色
    createRoleRequest() {
      createRole(this.roleCreateData).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: '创建成功',
            type: 'success'
          })
        }
        this.createRoleVisible = false
        this.refreshRoles()
      })
    },
    remarkHandler(row) {
      var remark = row.remark
      if (!remark || remark.length === 0) {
        return '无'
      } else {
        return remark
      }
    },
    elTableHeaderStyle() {
      return {
        background: '#F0F1F2',
        font_size: '18px',
        font_family: 'PingFang SC',
        font_weight: 400,
        color: '#6D7A8E'
      }
    },
    elTableCellStyle() {
      return {
        font_size: '20px',
        font_family: 'PingFang SC',
        font_weight: 400,
        color: '#8B9DBA'
      }
    },
    // 选择行变化时
    clickRowChange(ev) {
      this.tableRadio = ev
      // 可删除
      this.deleteRoleDisabled = false
    },
    pageChanged(ev) {
      this.rolesListQuery.start = ev
    },
    // 刷新数据
    refreshRoles() {
      getRoles(this.rolesListQuery).then((res) => {
        if (res.code === 200) {
          this.rolesListData = res.data
          this.rolesListCount = res.count
        }
      })
    },
    // 刷新按钮
    handleRefreshBtn() {
      this.isLoading = true
      this.refreshRoles()
      this.isLoading = false
    },
    // 编辑
    handleEdit() {
      this.editLiveOuterVisible = true
    },
    // 创建
    handleCreate() {
      this.createRoleVisible = true
    },
    handelDelete() {
      deleteRole(this.tableRadio.id).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        }
      })
      this.deleteRoleDisabled = true
    },
    // 头像上传成功
    handleHeadSculptureSuccess(res, file) {
      if (res.data.length > 0) {
        this.roleCreateData.HeadSculpture = res.data[0].AccessAddress
        this.roleDisplayData.HeadSculpture = res.data[0].AccessAddress
      }
    },
    // 上传前处理
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 5

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!')
      // }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 5MB!')
      }
      // return isJPG && isLt2M
      return isLt2M
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container-box {
  height: 1010px;

}
.box-tag {
  width: 4px;
  height: 28px;
  background: #2E9BEA;
  border-radius: 2px;
  position: relative;
  top: 25px;
}
.warp-line-top {
  width: 1627px;
  height: 4px;
  background: #EDF5FB;
  top: 85px;
  position: absolute;
}

.table-list-box {
  position: absolute;
  top: 176px;
  left: 55px;
  width: 1518px;
  height: 654px;
}
.btn-box {
  position: absolute;
  display: flex;
  align-items: center;
  width: 100%;
  top: 114px;
  left: 54px;
  .input-with-select {
    margin: 20px;
    left: 600px;
  }
  .page-box {
    right: 125px;
    position: absolute;
  }
}
.create-role-box {
    width: 500px;
    height: 783px;
  ::v-deep {
    .el-dialog__header {
      padding: 0px;
      padding-bottom: 0px;
    }
    .header-title {
      border: 1px solid #B2B2B2;
      opacity: 1;
      border-radius: 3px;
      background: #2E9BEA;
      opacity: 1;
      border-radius: 2px;
    }
  .el-dialog__headerbtn, .el-dialog__close {
        width: 29px;
        height: 29px;
        opacity: 1;
        color: white;
      }
  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      width: 96px;
      height: 96px;
      }
  .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
  .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 96px;
      height: 96px;
      // line-height: 178px;
      text-align: center;
      }
  .avatar {
      width: 96px;
      height: 96px;
      display: block;
    }
  .el-icon-plus {
    align-items: center;
    display: flex;
    justify-content: center;
    }
  }
  #title-text {
    font-size: 14px;
    font-family: PingFangSC-Regular;
    line-height: 35px;
    color: #6D7A8E;
    opacity: 1;
  }
  .el-icon-copy-document {
    margin-left: 5px;
  }
}
.middle-warp-box{
  width: auto;
  height: 0px;
  border: 1px solid #E6E6E6;
  opacity: 1;
}
.role-manager-title {
    width: 207px;
    height: 24px;
    font-size: 24px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #4A5462;
    position: absolute;
    top: 27px;
    left: 44px;
  }
.image-inline-box {
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  text-align: center;
  .image-and-text-display {
    display: flex;
    align-content: center;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
  }
}
.el-form-item {
  width: 70%;
}
</style>
